<!DOCTYPE html>
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{LANGUAGE_CODE}}" dir="{{LANGUAGE_BIDI|yesno:"rtl,ltr"}}" itemscope itemtype="http://schema.org/Article">
<head>
  <meta charset="utf-8">
  <meta property="twitter:account_id" content="1593210261" />
  <!-- Copyright (c) 2012 Google Inc.
   *
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   *     http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   *
   * Author: {% block headauthor %}{% endblock %}
   *
   * {% block credits %}{% endblock %}
   *
  -->
  <title>{% if self_pagename == 'home' %}{% trans "HTML5 Rocks" %} - {% trans "A resource for open web HTML5 developers" %}{% else %}{% block headtitle %}{% trans "A resource for open web HTML5 developers" %}{% endblock %} - {% trans "HTML5 Rocks" %}{% endif %}</title>
  <meta name="description" content="{% if tut.description %}{{tut.description}}{% else %}{{description}}{% endif %}">
  <meta name="keywords" content="{% trans "html5,html 5,html5 demos,html5 examples,javascript,css3,notifications,geolocation,web workers,apppcache,file api,filereader,indexeddb,offline,audio,video,drag and drop,chrome,sse,mobile" %}">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <meta name="theme-color" content="#f04530">
  <link rel="shortcut icon" href="/favicon.ico" sizes="16x16 32x32">
  <link rel="alternate" type="application/rss+xml" title="{% trans "HTML5 Rocks RSS" %}" href="http://feeds.feedburner.com/html5rocks">

  <!-- iOS: run in full-screen mode and display upper status bar as translucent -->
  <!--<meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">-->

  <meta itemprop="name" content="{% if tut.title %}{{tut.title}}{% endif %}{% if tut.subtitle %}: {{tut.subtitle}}{% endif %} - {% trans "HTML5 Rocks" %}">
  <meta itemprop="description" content="{% if tut.description %}{{tut.description}}{% else %}{{description}}{% endif %}">
  {% block share_image %}
  <meta itemprop="image" content="{{host}}/static/images/html5rocks-logo-wings.png">
  {% endblock %}

  {% if tut %}
  <meta name="twitter:card" content="summary">
  <meta name="twitter:site" content="@ChromiumDev">
  {% if tut.author.twitter_account %}<meta name="twitter:creator" content="@{{tut.author.twitter_account}}">{% endif %}

  <meta property="og:type" content="article">
  <meta property="og:title" content="{% if tut.title %}{{tut.title}}{% endif %}{% if tut.subtitle %}: {{tut.subtitle}}{% endif %} - {% trans "HTML5 Rocks" %}">
  <meta property="og:url" content="{{canonical_url}}">
  <meta property="og:description" content="{% if tut.description %}{{tut.description}}{% else %}{{description}}{% endif %}">
  <meta property="og:image" content="{% if tut.author %}{{host}}/static/images/profiles/{{ tut.author.key.name }}.png{% else %}{{host}}/static/images/html5rocks-logo-wings.png{% endif %}">
  <meta property="og:site_name" content="{% trans "HTML5 Rocks" %} - {% trans "A resource for open web HTML5 developers" %}">
  {% endif %}

  {% if tut.author.google_account %}
  <link rel="author" href="https://www.google.com/profiles/{{tut.author.google_account}}">
  {% endif %}
  {% if tut.second_author.google_account %}
  <link rel="author" href="https://www.google.com/profiles/{{tut.second_author.google_account}}">
  {% endif %}
  <link rel="publisher" href="https://plus.google.com/111395306401981598462">

  {% if localizations %}
  {% for alt_locale in localizations %}
  <link rel="alternate" hreflang="{{alt_locale.loc}}" href="{{host}}{{alt_locale.path}}">
  {% endfor %}
  {% endif %}

  {% if css_file %}
  <link rel="stylesheet" media="all" href="/static/css/{{css_file}}{% if prod %}.min{% endif %}.css?20131111">
  {% else %}
  <link rel="stylesheet" media="all" href="/static/css/base{% if prod %}.min{% endif %}.css?20131111">

  {% endif %}
  <link href="//fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600,800|Source+Code+Pro" rel="stylesheet">

  <link rel="apple-touch-icon" href="/static/images/identity/HTML5_Badge_64.png">
  <link rel="apple-touch-icon-precomposed" href="/static/images/identity/HTML5_Badge_64.png">
  
  {% if LANGUAGE_BIDI %}
    <!-- Here goes patches needed for BIDI languages like Farsi-->
    <link rel="stylesheet" media="all" href="/static/css/rtl.css">
  {% endif %}
  
  <script src="/static/js/modernizr.custom.82437.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5-els.js"></script>
  <![endif]-->

  {% block head %}{% endblock %}
</head>
<body data-href="{{self_pagename}}" onload="{% block onload %}{% endblock %}" class="pattern-bg">

  {% if gdl_page_url %}
    <a href="{{gdl_page_url}}" id="livebanner" alt="Watch HTML5Rocks LIVE" title="Watch HTML5Rocks LIVE">On Air <span class="record"></span></a>
  {% endif %}

  <header class="main">
    <a id="home_horns" href="/{{LANGUAGE_CODE}}/"><img src="" alt="{% trans "HTML5 Rocks" %}" width="24" height="50"></a>
    <h1 id="title">
      <a href="/{{LANGUAGE_CODE}}/" title="{% trans "HTML5 Rocks" %}">{% trans "HTML5 Rocks" %}</a>
    </h1>
    <nav>
      <ul>
        <li id="home_menu"><a class="home" href="/{{LANGUAGE_CODE}}/" rel="home">{% trans "Home" %}</a></li>
        <li id="tutorials_menu"><a href="/{{LANGUAGE_CODE}}/tutorials/?page=1" class="tutorials">{% trans "Tutorials" %}</a></li>
        <li id="updates_menu"><a href="http://updates.html5rocks.com/" class="updates">{% trans "Updates" %}</a></li>
        <li id="search_show">
          <a href="#search_form">
            <span>{% trans "Search" %}</span>
            <img src="" width="14" height="14" alt="">
          </a>
        </li>
      </ul>
    </nav>
    <div class="subheader search" style="display: none;" id="search_form">
      <div class="search">
        <form action="/{{LANGUAGE_CODE}}/search" id="cse-search-box" role="search">
          <!--<input type="hidden" name="cx" value="007435387813601113811:ef_kuvvx6a8">
          <input type="hidden" name="cof" value="FORID:9">
          <input type="hidden" name="ie" value="UTF-8">
          <input type="hidden" name="hl" value="{{LANGUAGE_CODE}}">-->
          <img id="search_hide" src="" width="29" height="29" alt="">
          <label><input type="search" name="q" id="q" autocomplete="off" placeholder="{% trans "Search" %}"/></label>
        </form>
      </div>
    </div>
    <div class="subheader features" style="display: none;" id="features" tabindex="0">
      <div class="features">
        <img id="features_hide" src="" width="29" height="29" alt="">
        <h2>{% trans "Features" %}</h2>
        <ul>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/offline" class="offline">
              <h3>{% trans "Offline" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/storage" class="storage">
              <h3>{% trans "Storage" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/connectivity" class="connectivity">
              <h3>{% trans "Connectivity" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/file_access" class="file_access">
              <h3>{% trans "File Access" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/semantics" class="semantics">
              <h3>{% trans "Semantics" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/multimedia" class="multimedia">
              <h3>{% trans "Audio/Video" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/graphics" class="graphics">
              <h3>{% trans "3D/Graphics" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/presentation" class="presentation">
              <h3>{% trans "Presentation" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/performance" class="performance">
              <h3>{% trans "Performance" %}</h3>
            </a>
          </li>
          <li>
            <a href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts" class="nuts_and_bolts">
              <h3>{% trans "Nuts &amp; Bolts" %}</h3>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </header>

  <a class="watermark" href="/{{LANGUAGE_CODE}}/"></a>

  <nav class="paginator features">
    <ul class="offline">
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/storage">{% trans "Storage" %}</a></li>
    </ul>
    <ul class="storage">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/offline">{% trans "Offline" %}</a></li>
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/connectivity">{% trans "Connectivity" %}</a></li>
    </ul>
    <ul class="connectivity">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/storage">{% trans "Storage" %}</a></li>
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/file_access">{% trans "File Access" %}</a></li>
    </ul>
    <ul class="file_access">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/connectivity">{% trans "Connectivity" %}</a></li>
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/semantics">{% trans "Semantics" %}</a></li>
    </ul>
    <ul class="semantics">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/file_access">{% trans "File Access" %}</a></li>
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/multimedia">{% trans "Audio/Video" %}</a></li>
    </ul>
    <ul class="multimedia">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/semantics">{% trans "Semantics" %}</a></li>
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/graphics">{% trans "3D/Graphics" %}</a></li>
    </ul>
    <ul class="graphics">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/multimedia">{% trans "Audio/Video" %}</a></li>
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/presentation">{% trans "Presentation" %}</a></li>
    </ul>
    <ul class="presentation">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/graphics">{% trans "3D/Graphics" %}</a></li>
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/performance">{% trans "Performance" %}</a></li>
    </ul>
    <ul class="performance">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/presentation">{% trans "Presentation" %}</a></li>
      <li><a class="next" href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts">{% trans "Nuts &amp; Bolts" %}</a></li>
    </ul>
    <ul class="nuts_and_bolts">
      <li><a class="previous" href="/{{LANGUAGE_CODE}}/features/performance">{% trans "Performance" %}</a></li>
    </ul>
  </nav>

  <div class="outline_nav_toggle deactivated">
    <img class="show" src="" alt="">
    <img class="hide" src="" alt="">

    <nav class="outline features">
      <h3>HTML5 Features</h3>
      <ul>
        <li class="offline">
          <a href="/{{LANGUAGE_CODE}}/features/offline" class="section_title offline">{% trans "Offline" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/offline#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/offline#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/offline#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/offline#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/offline#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/offline#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
        <li class="storage">
          <a href="/{{LANGUAGE_CODE}}/features/storage" class="section_title storage">{% trans "Storage" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/storage#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/storage#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/storage#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/storage#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/storage#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/storage#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
        <li class="connectivity">
          <a href="/{{LANGUAGE_CODE}}/features/connectivity" class="section_title connectivity">{% trans "Connectivity" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/connectivity#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/connectivity#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/connectivity#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/connectivity#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/connectivity#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/connectivity#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
        <li class="file_access">
          <a href="/{{LANGUAGE_CODE}}/features/file_access" class="section_title file_access">{% trans "File Access" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/file_access#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/file_access#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/file_access#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/file_access#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/file_access#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/file_access#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
        <li class="semantics">
          <a href="/{{LANGUAGE_CODE}}/features/semantics" class="section_title semantics">{% trans "Semantics" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/semantics#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/semantics#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/semantics#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/semantics#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/semantics#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/semantics#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
        <li class="multimedia">
          <a href="/{{LANGUAGE_CODE}}/features/multimedia" class="section_title multimedia">{% trans "Audio/Video" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/multimedia#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/multimedia#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/multimedia#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/multimedia#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/multimedia#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/multimedia#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
        <li class="graphics">
          <a href="/{{LANGUAGE_CODE}}/features/graphics" class="section_title graphics">{% trans "3D/Graphics" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/graphics#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/graphics#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/graphics#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/graphics#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/graphics#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/graphics#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
        <li class="presentation">
          <a href="/{{LANGUAGE_CODE}}/features/presentation" class="section_title presentation">{% trans "Presentation" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/presentation#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/presentation#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/presentation#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/presentation#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/presentation#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/presentation#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
        <li class="performance">
          <a href="/{{LANGUAGE_CODE}}/features/performance" class="section_title performance">{% trans "Performance" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/performance#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/performance#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/performance#themes">{% trans "Themes" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/performance#technologies">{% trans "Technologies" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/performance#techniques">{% trans "Techniques" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/performance#tools">{% trans "Tools" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/performance#further_reading">{% trans "Further Reading" %}</a></li>
          </ul>
        </li>
        <li class="nuts_and_bolts">
          <a href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts" class="section_title nuts_and_bolts">{% trans "Nuts &amp; Bolts" %}</a>
          <ul>
            <li><a href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts#intro">{% trans "Intro" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts#support">{% trans "Browser Support" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts#updates">{% trans "What&rsquo;s New" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts#demos">{% trans "Demos" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts#in_the_wild">{% trans "In the Wild" %}</a></li>
            <li><a href="/{{LANGUAGE_CODE}}/features/nuts_and_bolts#resources">{% trans "Resources" %}</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>

  <div class="page current loaded" id="{{self_pagename}}">
    {% block body %}{% endblock %}
  </div>

  <script>
  (function() {

    $(document).keydown(function(e) {
      if (e.keyCode === 27) { // ESC
        // Hide search and/or feature bar.
        $('#search_hide, #features_hide').click();
      }
    });

    // Toggle the feature nav.
    $('.outline_nav_toggle').click(function(e) {
      $(this).toggleClass('activated');
      $(this).find('nav.outline').fadeToggle('fast');
    });

    $('#features_show a').click(function() {
      $('#search_hide').click(); // Hide search panel if it's out.

      if ($(this).hasClass('current')) {
        $('.subheader.features').hide();
        $(this).removeClass('current');
        $('.watermark').css('top', '30px');
        $('#features_show a').focus();
      } else {
        $('.main nav .current').removeClass('current');
        $(this).addClass('current');
        $('.subheader.features').show();
        $('.watermark').css('top', '100px');
        $('#features').focus();
      }
      // don't apply hash
      if (/#features$/.test(this.href)) return false;
    });

    $('#features_hide').click(function() {
      $('#features_show').removeClass('current');
      $('.subheader.features').hide();
      $('.watermark').css('top', '30px');
      $('#features_show a').focus();
    });


    window.isCompatible = function() {
      {% block iscompatible %}
      return null;
      {% endblock %}
    };

    if (isCompatible() === false) {
      document.getElementById('notcompatible').className = '';
    } else if (isCompatible() === true) {
      document.getElementById('compatible').className = '';
    }

    // Kill feedburner and marketing tracking arguments, but let them register
    // before we do it.
    setTimeout(function() {
      if (/^\?utm_/.test(document.location.search) &&
          window.history.replaceState) {
        window.history.replaceState(
            {}, '', document.location.href.replace(/\?utm_.*/, ''));
      }
    }, 2000);

    //if ($(window).width() < 1200 && $(window).width() > 1000 && $('.toc').length) {
    if ($('.toc').length && $(window).width() > 1000) {
      // Fix the TOC if our scroll position is below the top of the page.
      var top = $('.toc').offset().top - 50;

      $(window).scroll(function (event) {
        // Get the position of the vertical scroll.
        var y = $(this).scrollTop();

        if (y >= top) {
          $('.toc').addClass('fixed').removeClass('bottom');
        } else {
          $('.toc').removeClass('fixed').removeClass('bottom');
        }
      });
    }
  })();
  </script>
 <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-15028909-1', 'auto');
  ga('create', 'UA-49880327-4', 'auto', {'name': 'html5rocks'});

  ga('send', 'pageview');
  ga('html5rocks.send', 'pageview');

</script>
 <!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MB3LRF');</script>
<!-- End Google Tag Manager -->

  <!-- defer is unreliable in ie <= 9, but o well -->
  <script defer src="/static/js/search{% if prod %}.min{% endif %}.js"></script>
</body>
</html>
